<template>
	<div>
		<!-- 操作区 -->
		<div class="content_box">
			<div class="interaction_box">
				<div class="interaction_hr"></div>
				<div class="interaction_ct_box">
					<div class="logo_img"></div>
					<h2 class="login_title">mall-admin-web</h2>
					<label :class="order==0?'user_box1':'user_box'">
						<span class="user_logo"></span>
						<input
							type="text"
							placeholder="请输入用户名"
							v-model="login.user"
              @blur="check"
						/>
					</label>
					<p class="check1" v-show="order == 1" >请输入正确的用户名</p>
					<label class="password_box">
						<span class="password_logo"></span>

						<input
							:type="login.hidden"
							placeholder="请输入密码"
							v-model="login.password"
              @blur="check1"
						/>
						<span class="user_eys" @click="passwordShow"></span>
					</label>
					<p class="check1" v-show="order1 == 1">请输入正确的密码</p>
          <div class="button_box">
            <button class="login_but" @click="Push">登录</button>
          </div>
				</div>
        
			</div>
      
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	data() {
		return {
			login: {
				user: 'admin',
				password: 'macro123',
				hidden: 'password',
			},
			passowrdShow: true,
			order: 0,
			order1: 0,
		}
	},
	methods: {
		// 密码框切换
		passwordShow() {
			this.passowrdShow = !this.passowrdShow
			if (this.passowrdShow == true) {
				this.login.hidden = 'text'
			} else {
				this.login.hidden = 'password'
			}
		},
		check() {
			if (this.login.user.length<3) {
				this.order = 1
			} else {
				this.order = 0

			}
			
		},
    check1(){
      if (this.login.password.length < 3) {
				this.order1 = 1
			} else {
				this.order1 = 0
			}
    },
    Push(){
			let user = this.login.user
			let password = this.login.password
			axios.post('http://admin-api.macrozheng.com/admin/login',{username:user,password:password}).then((res)=>{
				// console.log(res)
				localStorage.setItem('token',res.data.data.tokenHead+res.data.data.token)
				console.log(localStorage.getItem('token'))
				if(res.status==200){
					this.$router.push({name:'/'})
				}
			})
      // this.$router.push({
      //   name:'Home'
      // })
    }
	},
}
</script>

<style lang="scss">
@import './login.scss';
</style>